<template>
  <div class="RolePicker">
    <a-input-search v-model:value="searchKey" placeholder="输入工号/全拼/姓名 搜索员工" style="margin-bottom: 12px"/>
    <div class="box">
      <a-list size="small" bordered :data-source="roleList">
        <template #renderItem="{ item }">
          <a-list-item :key="item.id" @click="selected(item)" :class="{ highLightChecked: item.checked }">
            <a-row class="item-line" style="width: 100%">
              <a-col v-if="showCheckBox" :span="3">
                <a-checkbox :disabled="item.delete === false" v-model:checked="item.checked"></a-checkbox>
              </a-col>
              <a-col :title="item.name" :span="showCheckBox ? 21 : 24">{{ item.name }}</a-col>
            </a-row>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>
<script setup name="RolePicker" lang='ts'>
import {uniqBy} from 'lodash'
import roleApi from '@/api/sys/roleApi'
const emit = defineEmits({
  selectedRoles: undefined,
  'update:roles': undefined
})
let searchKey = ref('')
const props = defineProps({
  showCheckBox: {
    type: Boolean,
    default: () => false
  },
  multiple: {
    type: Boolean,
    default: () => false
  },
  roles: {
    type: Array,
    default: () => []
  }
})
const roleList = ref([])
const cacheRoleList = ref([])
const selectedArr = computed({
  get: () => {
    return props.roles
  },
  set: (val) => {
    emit('update:roles', val)
  }
})
const pageConfig = ref({
  current: 1,
  size: 100,
  end: false
})
const checkData = () => {
  if (roleList.value.length > 0) {
    roleList.value.forEach((res) => {
      if (
          !!selectedArr.value &&
          selectedArr.value.some((sres) => {
            return sres.id == res.id
          })
      ) {
        res.delete = selectedArr.value.find((fres) => {
          return fres.id == res.id
        }).delete
        res.checked = true
      } else {
        res.checked = false
        res.delete = true
      }
    })
  }
}
// 表格查询 返回 Promise 对象
const loadData = () => {
  roleApi
      .rolePage({
        current: pageConfig.value.current,
        size: pageConfig.value.size
      })
      .then((res) => {
        roleList.value = res.records
        checkData()
        cacheRoleList.value = JSON.parse(JSON.stringify(roleList.value))
      })
}
const selected = (item) => {
  let selected = JSON.parse(JSON.stringify(selectedArr.value))
  if (props.multiple) {
    item.checked = !item.checked
    if (item.checked) {
      uniqBy(selected.push(item), (e) => {
        return e.id
      })
    } else {
      selected = selected.filter((res) => {
        return res.id != item.id
      })
    }
  } else {
    roleList.value = roleList.value.map((res) => {
      if (res.id != item.id) {
        res.checked = false
      }
      return res
    })
    if (!item.checked) {
      item.checked = true
      selected = [item]
    } else {
      item.checked = false
      selected = []
    }
  }
  selectedArr.value = JSON.parse(JSON.stringify(selected))
  emit('selectedRoles', selected)
}
const getItems = (ids) => {
  return roleList.value.filter((res) => {
    return ids.includes(res.id)
  })
}
onMounted(() => {
  loadData()
})
watch(
    () => searchKey.value,
    (val) => {
      if (val) {
        roleList.value = JSON.parse(JSON.stringify(cacheRoleList.value)).filter((res) => {
          return res.name.indexOf(val) > -1
        })
      } else {
        roleList.value = JSON.parse(JSON.stringify(cacheRoleList.value))
      }
      checkData()
    }
)
</script>
<style scoped lang="less">
.RolePicker {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  overflow: hidden;
  .ant-input-search {
    flex: 0;
    width: 100%;
  }
  .box {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    .ant-list {
      width: 100%;
    }
    :deep(.ant-list-item) {
      &.highLightChecked {
        background: #e6f7ff;
        color: #1890ff;
      }
      &:hover {
        background: #efefef;
        color: #1890ff;
      }
      .item-line {
        cursor: pointer;
        transition: all 0.5s;
        & > * {
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
          text-overflow: ellipsis;
          &:first-child {
          }
        }
      }
    }
  }
  :deep(.ant-list-footer) {
    background: #bbcdf71a;
    padding: 5px 16px;
    .footer {
      text-align: center;
      :deep(.ant-spin-dot) {
        font-size: 18px !important;
      }
    }
  }
}
</style>
